<template>
  <div>
    <Top>首页</Top>
    <img
      src="@/assets/images/login_bg.png"
      alt=""
      srcset=""
      class="login-img"
    />
    <div class="login-form">
      <cube-form :model="model" @submit="submitHandler">
        <cube-form-group>
          <cube-form-item :field="fields[0]"></cube-form-item>
          <cube-form-item :field="fields[1]" :type="type"></cube-form-item>
        </cube-form-group>
        <cube-form-group>
          <cube-button type="submit">提交</cube-button>
        </cube-form-group>
        <cube-form-group>
          <cube-button type="submit">注册</cube-button>
        </cube-form-group>
      </cube-form>
    </div>
  </div>
</template>

<script>
import Top from "@/components/Top.vue";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      type: "password",
      model: {
        username: "",
        password: "",
      },
      fields: [
        {
          type: "input",
          modelKey: "username",
          label: "用户名",
          props: {
            placeholder: "请输入用户名",
          },
          rules: {
            required: true,
          },
        },
        {
          type: "input",
          modelKey: "password",
          label: "password",
          props: {
            placeholder: "请输入密码",
          },
          rules: {
            required: true,
          },
        },
      ],
    };
  },

  components: {
    Top,
  },

  computed: {},

  methods: {
    //拿到的是一个方法
    ...mapActions(["setLogin"]),

    submitHandler(e) {
      //点击时有默认行为，不能跳转
      e.preventDefault();
      this.setLogin(this.model);
      //从哪来回到哪里去
      if (this.$route.query.from) {
        console.log(this.$route.query.from)
        this.$router.push(this.$route.query.from).catch(()=>{});
      } else {
        this.$router.push('/profile').catch(() =>{})
      }
    },
  },
  mounted() {
    let passwordInput = document.querySelectorAll(".cube-input-field");
    passwordInput[1].type = "password";
  },
};
</script>
<style lang="less" scoped>
.login-img {
  height: 80px;
  width: 80px;
  display: block;
  margin: 20px auto;
}
.login-form {
  width: 80%;
  margin: 0 auto;
}
.cube-btn {
  margin-bottom: 10px;
}
</style>
